<template>
  <div id="rank">
    <div class="rank">
      <p class="official-rank">官方榜</p>
      <div
        class="official-item"
        v-for="(item, index) in officalList"
        v-if="index < 4"
        :key="index"
      >
        <div class="left" @click="skip(index)">
          <div class="images flex_center">
            <img src="./images/play.png" alt="" />
          </div>
          <img :src="item.coverImgUrl" alt="" />
        </div>
        <div class="right">
          <ul>
            <li
              v-for="(item, index) in officalSongList[index]"
              :key="index"
              class="flex_space_btween"
              :class="{ bk: index % 2 === 0 }"
              @click="play(item)"
            >
              <div class="left flex_start">
                <p :class="{ red: index === 0 || index === 1 || index === 2 }">
                  {{ index + 1 }}
                </p>
                <p>{{ ratios[0][index] }}%</p>
                <p>{{ item.name }}</p>
              </div>
              <div class="right">{{ item.ar[0].name }}</div>
            </li>
            <div class="all flex_start" @click="skip(index)">
              查看全部
              <div class="icon"><img src="../images/right.png" alt="" /></div>
            </div>
          </ul>
        </div>
      </div>
      <p>全球榜</p>
      <ul class="gloal-rank">
        <li
          v-for="(item, index) in rankList"
          :key="index"
          v-if="index >= 4"
          @click="skip(index)"
        >
          <div class="photo">
            <div class="icon flex_center">
              <img src="./images/play.png" alt="" />
            </div>
            <div class="images">
              <img v-lazy="item.coverImgUrl" alt="" />
            </div>
          </div>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "rank",
  data() {
    return {
      //全部榜单
      rankList: [],
      //官方榜单
      officalList: [],
      //榜单前五
      officalSongList: [],
      //榜单全部音乐
      officalSongListAll: [],
      //提升比率
      ratios: [],
      currentMusic: {},
    };
  },
  methods: {
    //播放相关
    play(item) {
      document
        .getElementsByClassName("audio-play")[0]
        .classList.add("audio-stop");
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);
          this.currentMusic = res.data.songs[0];
          this.$store.state.nowMusic = this.currentMusic;
          this.$store.state.playMusicList.push(this.currentMusic);
          //数组对象去重
          let obj = {};
          this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
            function (item, next) {
              obj[next.id] ? "" : (obj[next.id] = true && item.push(next));

              return item;
            },
            []
          );
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
          console.log("添加歌单成功", this.$store.state.playMusicList);
          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },

    //跳转至歌单列表
    skip(index) {
      this.$router.push({
        path: "rankdetail",
        query: {
          detail: this.rankList[index],
          id: this.rankList[index].id,
        },
      });
    },
  },
  created() {
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/toplist?timetamp=" + new Date().getTime(),
    }).then((res) => {
      // console.log(res.data);
      this.rankList = res.data.list;
      //创建官方榜单数组
      for (let index = 0; index < 4; index++) {
        this.officalList.push(this.rankList[index]);
        new Promise((resolve) => {
          this.axios({
            method: "get",
            withCredentials: true,
            url:
              "https://music.hzbiz.net/playlist/detail?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.officalList[index].id,
            },
          }).then((res) => {
            // console.log("先",res.data);
            resolve(res);
          });
        }).then((res) => {
          // console.log("后",res.data);
          let arr = [];
          let arrRadio = [];
          for (let index = 0; index < 5; index++) {
            arr.push(res.data.playlist.tracks[index]);
            arrRadio.push(res.data.playlist.trackIds[index].ratio);
          }
          // console.log(res.data.playlist.tracks);
          this.officalSongListAll.push(res.data.playlist.tracks);
          this.officalSongList.push(arr);
          this.ratios.push(arrRadio);
        });
      }
    });
  },
};
</script>

<style scoped>
.rank {
  width: 1100px;
  margin: 0 auto;
}
.rank > p {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.rank .official-item {
  margin-bottom: 20px;
}
.rank .official-item > .left {
  width: 172px;
  height: 172px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.official-item {
  display: flex;
  justify-content: space-between;
}
.official-item > .right li {
  width: 900px;
  height: 34.4px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 12px;
}

.official-item > .right li p:first-child {
  color: #9b9b9b;
  font-size: 14px;
  margin-right: 7px;
}
.official-item > .right li p:nth-child(2) {
  color: #9b9b9b;
  margin-right: 5px;
  width: 33px;
  text-align: center;
  font-size: 12px;
}
.official-item > .right li.bk {
  background-color: #f9f9f9;
}
.official-item > .right li:hover {
  background-color: #efefef;
}
.official-item > .right li p.red {
  color: #ec4141;
}
.all {
  margin-top: 5px;
  padding: 0 10px;
  color: #676767;
  font-size: 12px;
  cursor: pointer;
}
.all:hover {
  color: #000;
}
.all .icon {
  width: 10px;
  margin-left: 5px;
  overflow: hidden;
}
.official-item .left {
  position: relative;
}
.official-item .left .images {
  position: absolute;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.6;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
  visibility: hidden;
}
.official-item .left:hover .images {
  visibility: visible;
}
.official-item .left .images img {
  width: 25px;
  margin-left: 5px;
}
.gloal-rank {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.gloal-rank li > p {
  margin-top: 10px;
  margin-bottom: 30px;
}
.gloal-rank li {
  width: 206px;
  cursor: pointer;
  margin-right: 14px;
}
.gloal-rank li .photo {
  position: relative;
}
.gloal-rank li .images {
  width: 206px;
  height: 206px;
  overflow: hidden;
  border-radius: 10px;
}
.gloal-rank .icon {
  position: absolute;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.6;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
  visibility: hidden;
}
.gloal-rank li:hover .icon {
  visibility: visible;
}
.gloal-rank .icon img {
  width: 25px;
  margin-left: 5px;
}
</style>